<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Proxy 实现数据绑定简单案例</title>
</head>
<body>
  <input id="input_el" oninput="inputHandle(this)"/>
  <br/>
  <div id="show_el"></div>
  <script>
    let proxy_bind = function(target){
      return new Proxy(target,{
        get(obj,prop){
          if(!obj[prop]){
            obj[prop]="初始值";
          }
          return obj[prop];
        },
        set(obj,prop,newValue){
          obj[prop]=newValue;
          document.getElementById("show_el").innerText = obj[prop];
          return
        }
      })
    }
    let obj = {};
    let obj_bind = proxy_bind(obj);
    (function(){
      document.getElementById("show_el").innerText = obj_bind.value;
      document.getElementById("input_el").value = obj_bind.value;
    })();
    function inputHandle(obj){
      obj_bind.value = obj.value;
    }
  </script>
</body>
</html>
